import React from 'react'
import {Table, Button, Divider} from 'antd'
import styles from './List.less'

const List = ({
    onExport,
    onShowHistory,
    onShowDetail,
    onShowMemo,
    ...tableProps
}) => {
    const columns = [
        {
            title: '#',
            dataIndex: 'index',
            key: 'index',
            width: 40,
            render: (text, record, index) => (index + 1)
        }, {
            title: '报表名称',
            dataIndex: 'reportName',
            key: 'reportName',
            className: styles.reportName
        }, {
            title: '导出',
            key: 'export',
            render: (record) => (<Button
                type="primary"
                shape="circle"
                icon="export"
                onClick={e => onExport(record)}/>)
        }, {
            title: '其他操作',
            render: (text, record) => (
                <span>
                    <a onClick={() => onShowHistory(record)}>
                        导出历史
                    </a>
                    <Divider type="vertical"/>
                    <a onClick={() => onShowDetail(record)}>查看</a>
                    <Divider type="vertical"/>
                    <a onClick={() => onShowMemo(record)}>描述</a>
                </span>
            )
        }
    ]

    return (
        <div>
            <Table
                {...tableProps}
                columns={columns}
                className={styles.table}
                size="middle"
                rowKey={record => record.id}/>
        </div>
    )
}

export default List
